﻿<div class = "row">
	<div class="well col-sm-offset-1 col-sm-4">
		<img src = "<?php echo base_url();?>/public/pictures/music.jpg" style = "width:420px;height:350px;">
	</div>

	<div class="well col-sm-6">
		<div class = "text-default" style = "height:260px;">
		<h3>服务器的基础知识</h3>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<div id = "content">
			
		</div>
		</div>
		<nav>
			<ul class="pager">
				<li class = "text-info" style = "right:50px;">页次:<span id = "dijiye">2</span>/<span id = "zongyeshu">5</span>页</li>
				&nbsp;&nbsp;&nbsp;
				<li><button id="first">首页</button></li>
				<li><button id="prev">上一页</button></li>
				<li><button id="next">下一页</button></li>
				<li><button id="last">尾页</button></li>
			</ul>
		</nav>
	</div>
</div>
	<!-- 2.加载jQuery库，同时加载该库必须在加载bootstrap.min.js之前 -->
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <!-- 3.加载bootstrap的核心js库 -->
    <script src="<?php echo base_url();?>/public/js/bootstrap.min.js"></script>
	<script type = "text/javascript">
		$(document).ready(function(){
			var page_num = 1;
			var page_total = 8;
			var url = "<?php echo site_url('content/getajax');?>";
			function init(){
				if(page_num == 1){
					$('#first').hide();
					$('#prev').hide();
				}else{
					$('#first').show();
					$('#prev').show();
				}
				if(page_num == page_total){
					$('#next').hide();
					$('#last').hide();
				}else{
					$('#next').show();
					$('#last').show();
				}
				$.post(url,{page:page_num},function(data,status){
					$('#content').text(data);
					$('#dijiye').text(page_num);
					$('#zongyeshu').text(page_total);
				});
			}
			init();
			$('#first').click(function(){
				page_num = 1;
				init();
			});
			$('#prev').click(function(){
				page_num = page_num - 1;
				init();
			});
			$('#next').click(function(){
				page_num = page_num + 1;
				init();
			});
			$('#last').click(function(){
				page_num = 8;
				init();
			});
			
		});
    </script>
	</script>
  </body>
</html>
	